<template>
    <up-popup class="lotglaPopup" :safeAreaInsetTop="true" mode="top" :show="show" :overlay="false" @close="close" @open="openCallback">
        <up-navbar bgColor="#7099B4" :safeAreaInsetTop="true" >
          <template #left>
            <up-icon size="35" :name="j8Ico"></up-icon>
            <up-text text="地段及政府撥地" color="#fff"></up-text>
          </template>
          <template #right>
              <up-icon size="28" :name="closePng" color="#fff"  @click="close"></up-icon>
          </template>
        </up-navbar>
      <view class="content">
        <bangs/>

        <scroll-view :scroll-y="true" class="scroll-Y" >
        <up-collapse accordion :value="selectedVal" :border="false" @open="collapseOpen"  @close="collapseClose">
            <template v-if="searchList.length>0">
              <up-collapse-item :icon="(item.pId === selectedVal) ? MapIcons.polygon : MapIcons.polygon1" :name="item.pId" :title="item.glaDisplayName" v-for="item in searchList" :key="item.id">
                  <text class="u-collapse-content">类型：{{ selectedDesc }}</text>
              </up-collapse-item>
            </template>
            <template v-else>
              <up-empty text="暫無相關數據" :icon="noData" iconSize="20" width="100" height="100" marginTop="45"
              ></up-empty>
            </template>
        </up-collapse>
        <up-gap height="100" bgColor="#ffffff00"></up-gap>
        </scroll-view>
      </view>
  </up-popup>
</template>

<script setup  lang="ts">
import { ref } from 'vue';
import bangs from '@/pages/common/head/bangs.vue'
import closePng from '@/static/images/close.png'
import j8Ico from '@/static/icon/J8.png'
import noData from '@/static/images/noData.png'
import { mapStore } from '@/stores'
import { AllLOTGAL } from '@/api/system/map'
import { MapIcons } from '@/utils/base64-icons'

const mapStoreFun = mapStore();

// 创建响应式数据
const show = ref(false);

const emit = defineEmits<{
  (e: 'onSearchFor', data: any,keyIds:any): void
}>()

const value = ref('')
const searchList: any = ref([])
const selectedDesc = ref('')
const selectedVal = ref('')

// 定义方法
function open(data:any,desc?:any,key?:any) {
  mapStoreFun.SUM_MAPTYPE(1)
  value.value = data
  if (desc) selectedDesc.value = desc + " " +getSecondPart()
  if (key) selectedVal.value = key
  fetchOptions()
  show.value = true
}

const getSecondPart = () => {
  if (!value.value) {
    return '';
  }
  const parts = value.value.split(/\s+/);
  return parts.length >= 2 ? parts[1] : '';
};

function fetchOptions() {
    if (value.value?.length<1) {
      searchList.value = []
      return
    }

    AllLOTGAL(value.value).then((data:any) => {
      searchList.value = data.rows;
      if (selectedVal.value) {
        selectedVal.value = selectedVal.value
      } else {
        selectedVal.value = searchList.value[0]?.pId
      }
      collapseOpen(selectedVal.value)
    }).catch(error => {
      searchList.value = [];
      selectedVal.value = '';
      collapseClose(selectedVal.value)
      console.error("获取数据失败:", error);
    })
}

function openCallback() {
}

function collapseOpen(val:any){
  selectedVal.value = val;
  const item = searchList.value.find((item:any) => item.pId === val);
  const keyIds:any = ref([]);
  for (const search of searchList.value) {
    keyIds.value.push(search.pId);
  }
  emit('onSearchFor', item,keyIds)
}

function collapseClose(val:any){
  selectedVal.value = '';
  emit('onSearchFor', {},[])
}

function close() {
  mapStoreFun.SUM_MAPTYPE(-1)
  value.value = ''
  searchList.value = []
  selectedDesc.value = ''
  selectedVal.value = ''
  show.value = false;
}

defineExpose({
  open,
  close
});

</script>

<style scoped>
.lotglaPopup .content {
  padding: 20rpx 20rpx 0px 20rpx;
  background-color: #fff;
  border-radius: 0px;
  margin-bottom: 20rpx;
  overflow: hidden;
  height: 35vh;
  }
.searchList {
  height: 35vh;
  overflow-y: auto;
}
.item {
  padding: 20rpx 20rpx;
  border-bottom: 1px solid #d9d4d4;
  .top {
    display: flex;
    font-weight: bold;
    font-size: 34rpx;
    .phone {
      margin-left: 60rpx;
    }
    .tag {
      display: flex;
      font-weight: normal;
      align-items: center;
      text {
        display: block;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #ffffff;
        font-size: 20rpx;
        /* border-radius: 6rpx; */
        text-align: center;
        margin-left: 30rpx;
        background-color: rgb(49, 145, 253);
      }
      .red {
        background-color: red;
      }
    }
  }
  .bottom {
    display: flex;
    margin-top: 20rpx;
    font-size: 28rpx;
    justify-content: space-between;
    color: #999999;
  }
}
</style>

